<template>
    <div>
     <div class="search">
      <form action="/">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          show-action
          @search="onSearch"
          @cancel="onCancel"
          shape="round"
          background="#C44A3D"
        />
      </form>
     </div>
      <!--    按歌手搜索-->
      <div class="searchBySinger">
        <div class="searchBySinger-item">
          按歌手搜索<img src="../assets/icon/xiayige.png" class="searchBySinger-img" />
        </div>
        <div class="searchBySinger-item_right"></div>
      </div>
      <!--    热门搜索-->
      <div class="hotSearch">
        <div class="hotSearch-title">热门搜索</div>
        <div class="hotSearch-word">
          <div class="hotSearch-word_item" v-for="(item, index) in hotSearch" :key="index">
            {{item.searchWord}}
            <img :src="item.iconUrl" class="hotSearch-img" alt="">
          </div>
        </div>
      </div>

      <!--广告-->
      <div class="Advertisement">
        <img src="../assets/icon/banner07.png" alt="" class="Advertisement_img">
      </div>

      <!--    搜索历史-->
      <div class="deleteHistory">
        <div class="deleteHistory-title">
          <span class="title deleteHistory-title_item">搜索历史</span>

          <img src="../assets/icon/delete.png" class="deleteHistory-img" alt="">

        </div>
        <div class="hotSearch-word">
          <div class="hotSearch-word_item" v-for="(item, index) in searchDefault" :key="index">
            {{item.first}}
          </div>
        </div>
      </div>
    </div>

</template>

<script>
  import { Dialog } from  'vant'

     export default {
          name: "search",
       data(){
            return{
              value : '',
              hotSearch: [],
              searchDefault: [],
              item: '',
            }
       },
       methods:{
         onSearch(){

         },
         onCancel(){
           this.$router.push({ path: '/' });
         },
       },
       created(){
         // 热门搜索关键字
         this.$http.get('http://localhost:3000/search/hot/detail').then((res) => {
           this.hotSearch = res.data.data;
           // eslint-disable-next-line no-unused-vars
         }).catch((res) => {
           // console.log(res);
         });
         // 热门搜索关键字
         this.$http.get('http://localhost:3000/search/hot').then((res) => {
           // eslint-disable-next-line no-console
           this.searchDefault = res.data.result.hots;
           // this.hotSearch = res.data.data;
           // eslint-disable-next-line no-unused-vars
         }).catch((res) => {
           // console.log(res);
         });

       },
       //门卫阻止返回拦截一下
       beforeRouteLeave(to, from, next){
         Dialog.confirm({
           title:'温馨提示',
           message:'你真的忍心离开吗',
         })
           .then(() => {
             next();
           })
           .catch(() => {
             next(false)
           });
       }

     }
</script>

<style scoped>
 .search{
   width: 100%;
   height: 50px;

 }
 .van-search__content{
   background-color: #D06B62;
 }
  .van-search__action{
    color: #fffdef;
  }
  .van-cell{
    font-size: 14px;
    color: #DC978F;
  }

  .searchBySinger{
    width: 100%;
    height: 40px;

  }
  .searchBySinger-item{
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 19px;
    font-weight: bold;
    text-indent: 10px;
    color: #323233;
    border-bottom: 1px solid #F1F2F3;
  }
  .searchBySinger-img{
    width: 12px;
    height: 14px;
    margin-left: 10px;
  }
 /*热门搜索*/
 .hotSearch{
   width: 100%;

 }
 .hotSearch-title{
   width: 100%;
   height: 40px;
   line-height: 50px;
   font-size: 18px;
   text-indent: 10px;
   font-weight: 600;
   margin-top: 20px;
 }
 .hotSearch-word{
   width: 100%;
   height: 140px;
   overflow: hidden;
   margin: auto;
 }
 .hotSearch-word_item{
   display: inline-block;
   padding: 5px 5px;
   background-color: #EFEFF0;
   border-radius: 45px;
   font-size: 14px;
   float: left;
   margin-left: 6px;
   margin-top: 10px;
   text-indent: 6px;
 }
 .hotSearch-img{
   height: 20px;
   margin-left: 10px;
 }
  .Advertisement{
    width: 96%;
    height: 100px;
    margin: 10px auto;
  }

  .deleteHistory{
    width: 100%;
    height: 250px;

  }
 .deleteHistory-title{
   width: 100%;
   height: 50px;
   position: relative;
 }
  .deleteHistory-title_item{
    display: block;
    font-size: 18px;
    font-weight: bold;
    width: 80%;
    height: 50px;
    line-height: 50px;
  }
  .deleteHistory-img{
   width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
  }
 .Advertisement_img{
   width: 100%;
   height: inherit;

 }
</style>
